<header class="board-title" fxLayout fxLayoutAlign="start center">
  <img alt="" class="logo" src="assets/img/logo.png">
  <div class="title-name" fxFlex>
    <span>{{'Nav.board-abnormal'|translate}}</span>
  </div>
  <div class="date-box">
    <span>{{currentDateTime$|async|date:'yyyy-MM-dd HH:mm:ss'}}</span>
  </div>
</header>

<main class="board-content" fxFlex fxLayout>
  <section fxFlex="40" fxLayout="column" style="padding-right: .5rem">
    <table border="1">
      <thead>
      <tr>
        <th translate="line"></th>
        <th translate="lineMachine"></th>
        <th translate="batchNo"></th>
        <th translate="tubeColor"></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>C1</td>
        <td>item.line.name</td>
        <td>batchNo</td>
        <td>tubeColor</td>
      </tr>
      </tbody>
    </table>

    <table border="1">
      <caption translate="Common.notification"></caption>
      <tr>
        <td colspan="4">
          <p id="pNotice">it.note</p>
          <label class="currDate" id="pNoticeDate">
            name yyyy-MM-dd
          </label>
        </td>
      </tr>
    </table>
  </section>

  <section fxFlex="60" fxLayout="column" style="padding-left: .5rem">
    <table border="1">
      <thead>
      <tr>
        <th translate="LineMachine.spec"></th>
        <th translate="doffingNum"></th>
        <th translate="Common.exception"></th>
        <th translate="Common.time"></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>C1-12/13</td>
        <td>B2</td>
        <td>exception</td>
        <td>yyyy-MM-dd HH:mm:ss</td>
      </tr>
      </tbody>
    </table>
  </section>
</main>
